<template>
    <el-dialog v-model="visible" :title="!dataForm.id ? $t('add') : $t('update')" :close-on-click-modal="false"
        :close-on-press-escape="false" width="60%">
        <el-form :model="dataForm" :rules="rules" ref="dataFormRef" @keyup.enter="dataFormSubmitHandle()"
            label-width="120px" label-position="top">
            <el-row>
                <el-col :span="7">
                    <el-form-item prop="name" :label="$t('student.name')" required>
                        <el-input v-model="dataForm.name" :placeholder="$t('input')"></el-input>
                    </el-form-item>
                </el-col>

                <el-col :span="7" :offset="1">
                    <el-form-item prop="sid" :label="$t('student.sid')">
                        <el-input v-model="dataForm.sid" :placeholder="$t('input')"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="7" :offset="1">
                    <el-form-item prop="gender" :label="$t('student.gender')" required>
                        <ren-radio-group v-model="dataForm.gender" dict-type="gender"></ren-radio-group>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="15">
                    <ax-id-number v-model="dataForm.idNumber" v-model:idNumberType="dataForm.idNumberType"></ax-id-number>
                </el-col>
                <!-- <el-col :span="7">
                    <el-form-item prop="idNumberType" :label="$t('student.idNumberType')" required>
                        <ren-select v-model="dataForm.idNumberType" dict-type="idNumberType"></ren-select>
                    </el-form-item>
                </el-col>
                <el-col :span="7" :offset="1">
                    <el-form-item prop="idNumber" :label="$t('student.idNumber')" required>
                        <el-input v-model="dataForm.idNumber" :placeholder="$t('input')"></el-input>
                    </el-form-item>
                </el-col> -->
                <el-col :span="7" :offset="1">
                    <el-form-item prop="deptName" :label="$t('student.class')">
                        <ren-dept-tree v-model="dataForm.classId" :placeholder="$t('choose')"
                            v-model:deptName="dataForm.deptName" :url="'/data/class/list'"></ren-dept-tree>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="7">
                    <el-form-item prop="status" :label="$t('student.status')" required>
                        <ren-select v-model="dataForm.status" dict-type="student_status"></ren-select>
                    </el-form-item>
                </el-col>
                <el-col :span="7" :offset="1">
                    <el-form-item prop="entryTime" :label="$t('student.entryTime')">
                        <el-date-picker v-model="dataForm.entryTime" type="date" value-format="YYYY-MM-DD"
                            :placeholder="$t('choose')" />
                    </el-form-item>
                </el-col>
                <el-col :span="7" :offset="1">
                    <el-form-item prop="residency" :label="$t('student.residency')">
                        <ren-radio-group v-model="dataForm.residency" dict-type="yes_or_no"></ren-radio-group>
                    </el-form-item>
                </el-col>
                <el-col :span="7">
                    <el-form-item prop="imageUrl" :label="$t('student.imageUrl')">
                        <ax-upload v-model="dataForm.imageUrl" v-model:imagePath="dataForm.imagePath"></ax-upload>
                    </el-form-item>
                </el-col>
            </el-row>

        </el-form>
        <template v-slot:footer>
            <el-button @click="visible = false">{{ $t("cancel") }}</el-button>
            <el-button type="primary" @click="dataFormSubmitHandle()">{{ $t("confirm") }}</el-button>
        </template>
    </el-dialog>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue";
import baseService from "@/service/baseService";
import { IObject } from "@/types/interface";
import { useI18n } from "vue-i18n";
import { ElMessage } from "element-plus";
import { PersonnelType } from "@/constants/enum";

const { t } = useI18n();
const emit = defineEmits(["refreshDataList"]);

const visible = ref(false);
const dataFormRef = ref();

const dataForm = reactive({
    personnelType: PersonnelType.STUDENT,
    id: "",
    name: "",
    idNumberType: 1,
    idNumber: "",
    sid: "",
    gender: null,
    status: 1,
    residency: null,
    classId: "",
    deptName: "",
    entryTime: "",
    imageUrl: "",
    imagePath: "",
});

const rules = ref({
    name: [{ required: true, message: t("validate.required"), trigger: "blur" }],
    gender: [{ required: true, message: t("validate.required"), trigger: "change" }],
    status: [{ required: true, message: t("validate.required"), trigger: "change" }]
});

const init = (id?: number) => {
    visible.value = true;
    dataForm.id = "";
    dataForm.classId = "";

    // 重置表单数据
    if (dataFormRef.value) {
        dataFormRef.value.resetFields();
    }

    if (id) {
        getInfo(id);
    }
};

// 获取信息
const getInfo = (id: number) => {
    baseService.get(`/data/personnel/student/${id}`).then((res) => {
        Object.assign(dataForm, res.data);
    });
};

// 表单提交
const dataFormSubmitHandle = () => {
    dataFormRef.value.validate((valid: boolean) => {
        if (!valid) {
            return false;
        }
        baseService[!dataForm.id ? 'post' : 'put'](('/data/personnel/student'), {
            ...dataForm,
            gender: Number(dataForm.gender),
            residency: Number(dataForm.residency),
        }).then((res) => {
            ElMessage.success({
                message: t("prompt.success"),
                duration: 500,
                onClose: () => {
                    visible.value = false;
                    emit("refreshDataList");
                }
            });
        });
    });
};

defineExpose({
    init
});
</script>

<style lang="less" scoped>
.ax-upload {
    color: #000;

    &-tip {
        font-size: 16px;
        font-weight: bold;
        padding: 0 20px;
    }

    &-template {
        padding: 10px 20px;
        color: #999999;
        display: flex;
        align-items: center;

        .icon-svg {
            color: green;
        }

        a {
            text-decoration: underline;
        }
    }

    &-warp {
        width: 100%;
        padding: 0;
        text-align: center;
        line-height: 16px;
        background-color: #f8f8f8;
        padding: 20px;
        border-radius: 10px;
        border: 1px dashed #cccccc;

        &__tip {
            font-size: 11px;
            color: #666;
        }

        &__txt {
            font-size: 13px;
            color: #666;
            padding: 10px 0;
        }
    }
}
</style>